<template>
    <div>
        <setHeader title="加入申请"></setHeader>
        <div class="pagecontent">
            <div class="default_input_box join_circle" v-show="showss">
                <label for="">企业名称：</label>
                <input type="text" placeholder="" v-model="MainNmae" @mousedown="showPicker">
            </div>
            <div class="default_input_box join_circle" v-show="showsss">
                <label for="">企业名称：</label>
                <input type="text" placeholder="" v-model="MainNmaes" @click.capture="showCompanyList" @mousedown="showPicker">
            </div>
             <div class="default_input_box join_circle">
                <label for="">您的姓名：</label>
                <input type="text" placeholder="请输入您的真实姓名" v-model="circleAdd.uname">
            </div>
            <!--<div class="default_input_box join_circle">
                <label for="">申请理由：</label>
                <input type="text" placeholder="请填写您的申请理由">
            </div> -->
            <div class="join_circle" style="padding-bottom: 0.16rem; height: 2.42rem;">
                <label for="" style="vertical-align: top;">申请理由：</label>
                <textarea class="jinzhi" name="" id="" placeholder="限制200字" v-model="circleAdd.message" style="-webkit-user-select:auto;" contenteditable="true" ref="count"></textarea>
                <div class="small_num" v-html="number"></div>
            </div>
            <div class="btn_big_red" style="margin-top: 0.9rem;" @click="sendApplication()">
                <button>发送</button>
            </div>
        </div>

        <!-- 选择企业 -->
        <mt-popup
            v-model="popupVisible"
            position="bottom">
        <ul> 
            <li v-for="list in UcompanyList" @click="JoinCirlce(list.name,list.id)" :key="list.id">{{list.name}}</li>
        </ul>
        </mt-popup>
    </div>
</template>

<script>
import setHeader from '../public/setHeader.vue';
import { MessageBox } from 'mint-ui';
    export default {
        data() {
            return {
                number: '200',
                circleAdd: {
                    uid: '',
                    cid: '',
                    cp_id: '',
                    message: '',
                    uname:'',
                },
                UcompanyList:[],
                popupVisible: false,
                showsss:'',
                MainNmaes: '',
                showss:'',
                MainNmae:'',
            }
        },
        watch:{   //watch()监听某个值（双向绑定）的变化，从而达到change事件监听的效果
            circleAdd:{
                handler() {
                    var _this = this;
                    var _sum = 200; //字体限制为100个
                    _this.$refs.count.setAttribute("maxlength",_sum);
                    _this.number= _sum- _this.$refs.count.value.length;
                },
                deep:true
            }
        },
        components: {
            setHeader
        },
        created() {
            let that = this;
            that.userInfo = window.localStorage.getItem('userInfo');
            that.userInfo = JSON.parse(that.userInfo);
            that.getCompanyInfo();
        },
        mounted() {
            this.circleAdd.cid = this.$route.query.cid;
            
            // let that = this;
            // var user = Promise.resolve(this.getUserInfo())
            // user.then(
            //     function (result) { 
            //     console.log(result);
            //     that.userInfo = result;
            //     that.getCompanyInfo();
            // })
            
        },
        methods: {
            //获取用户拥有的企业
            getCompanyInfo() {
                let that = this;
                let uid = that.userInfo.uid;
                this.$post(that.$path+'/api.php/company/getAuthCompanyList',{userId:uid,type:0}).then((res) => {
                    console.log('用户企业',res.data[0]['id']);
                    if(res.code == 200) {
                        let count = res.data.length;
                        that.circleAdd.cp_id = res.data[0]['id'];
                        if(count == 1){
                            that.showss = true;
                            that.MainNmae= res.data[0].name;
                            that.company_id = res.data[0].id;
                        }else{
                            that.company_id = res.data[0].id;
                            that.MainNmaes= res.data[0].name;
                            // that.MainNmaes= '请点击选择企业';
                            that.showss = false;
                            that.showsss = true;
                            that.UcompanyList = res.data;
                        }
                        // res.data.forEach(el => {
                        //     that.circleAdd.cp_id = el.id;
                        // });   
                    }
                    else if (res.code == '-1') {
                        that.popupVisible = false;
                        MessageBox.alert('您需要先绑定企业').then(action => {
                            this.$router.push({
                                path: '/companyCreate'
                            });
                        });
                    }                        
                })
            },
            //点击选择企业
            showCompanyList() {     
                this.popupVisible = true;
            },
            showPicker(e){
                e.preventDefault(); //阻止输入法的唤醒
            },
            JoinCirlce:function(name,id){
                this.MainNmaes= name;
                this.company_id = id;
                this.popupVisible = false;
                this.circleAdd.cp_id = id;
            },
            
            sendApplication() {
                let that = this;
                that.circleAdd.uid = that.userInfo.uid;
                // console.log('企业申请',that.circleAdd);return false;
                if(that.circleAdd.uname==''){
                    that.$openTips({
                        text: '请输入您的姓名',
                        time: 1000
                    })
                    return false;
                }
                if(that.circleAdd.message==''){
                    that.$openTips({
                        text: '请输入申请理由',
                        time: 1000
                    })
                    return false;
                }
                
                that.$post(that.$path+'/api.php?s=/Circle/circleJoin', that.circleAdd).then((res) => {
                    console.log('审核圈子22', res);
                    if(res.code == 200) {
                      that.$openDialog({
                        src: require('../common/images/UI-11.png'),
                        title: '提交完成',
                        message: '请等待审核通过',
                        okText: '完成',
                        callback (flag) {
                            if(flag) {
                                that.$router.push({
                                    path: '/userCenter'
                                })
                            }     
                        }
                      });  
                    }else {
                        MessageBox('提示', res.msg);
                    }
                })
            },
        },
    }
</script>

<style>
.join_circle {
    border-bottom: 1px solid #d8d8d8;
    background-color: #fff;
    position: relative;
}
.join_circle label {
    width: 1.8rem;
    color: #333;
    display: inline-block;
    font-size: 0.28rem;
    line-height: 1rem;
}
.join_circle input {
    width: 72% !important;
    border-bottom: none !important;
}
.join_circle .jinzhi {
    width: 72%;
    height: 2.4rem;
    outline: none;
    border: none;
    margin-bottom: -0.26rem;
    font-size: 0.26rem;
    color: #333;
    padding: 0.16rem 0.16rem 0 0.16rem;
}
.join_circle .small_num {
    position: absolute;
    bottom: 0;
    right: 0;
    margin-right: 0.2rem;
    font-size: 0.24rem;
    color: #999;
}
</style>